<template>
  <div class="recordPage">
    <div class="filterVue">
      <div style="display: flex">
        <div class="filter">
          <span style="padding-right: 10px">商品名称</span>
          <el-input
            v-model="params.productName"
            placeholder="请输入"
            style="margin-left: 10px; width: 190px"
            @input="input1"
          ></el-input>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">商品条形码</span>
          <el-input v-model="params.itemNumber" placeholder="请输入" style="margin-left: 10px; width: 190px" @input="input2"></el-input>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">商品编码</span>
          <el-input v-model="params.barCode" placeholder="请输入" style="margin-left: 10px; width: 190px" @input="input3"></el-input>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">商品分类</span>
          <el-cascader
            ref="cascaderRef"
            v-model="params.categoryId"
            :options="merPlatProductClassify"
            :props="categoryProps"
            @change="handleSeachList"
            collapse-tags
            style="width: 220px"
          ></el-cascader>
        </div>
        <div class="filter">
          <span style="padding-right: 10px">门仓选择</span>
          <el-cascader
            v-model="params.storeId"
            :options="storeList"
            :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
            @change="handleTransferOutStoreChange"
          ></el-cascader>
        </div>
      </div>
      <div style="display: flex">
        <div class="btn1" @click="search">查询</div>
        <div class="btn1" @click="clearAll">清空</div>
      </div>
    </div>
    <div class="tableVue">
      <div class="tableList">
        <div class="thVue">
          <div class="th">商品编码</div>
          <div class="th">商品条形码</div>
          <div class="th">商品名称</div>
          <div class="th">商品规格</div>
          <div class="th">单位</div>
          <div class="th">门仓名称</div>
          <div class="th">当前库存</div>
          <div class="th">待入库</div>
          <div class="th">待出库</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td">{{ item.barCode }}</div>
            <div class="td">{{ item.itemNumber }}</div>
            <div class="td" style="display: flex; align-items: center; justify-content: center;">
              <img :src="item.image" style="width: 40px; height: 40px;">
              <span>{{ item.productName }}</span>
              
            </div>
            <div class="td">{{ item.sku }}</div>

            <div class="td">{{ item.unitName }}</div>
            <div class="td">{{ item.storeName }}</div>
            <div class="td">{{ item.currentStock }}</div>
            <div class="td">{{ item.pendingInStock }}</div>

            <div class="td">{{ item.pendingOutStock }}</div>
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="params.limit"
            @current-change="pageChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jishiList } from '@/api/msg';
import { listStore } from '@/api/commercial';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      list: [],
      total: 0,
      params: {
        categoryId: '',
        productName: '',
        limit: 20,
        page: 1,
        itemNumber: '',
        storeId: '',
        storeType: '',
        barCode: ""
      },
      storeList: [
        { name: '仓库', id: 1, children: [] },
        { name: '门店', id: 2, children: [] },
      ],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'childList',
        expandTrigger: 'hover',
        checkStrictly: false,
        emitPath: false,
        multiple: false,
      },
    };
  },
  created() {
    this.getList();
    this.getStoreList();
  },
  mounted() {
    if (!localStorage.getItem('merPlatProductClassify')) this.$store.dispatch('product/getAdminProductClassify');
  },
  computed: {
    ...mapGetters(['merPlatProductClassify']),
  },
  methods: {
    pageChange(e) {
      console.log(e);
      this.params.page = e;
      this.getList();
    },
    getList() {
      jishiList(this.params).then((res) => {
        this.list = res.list;
        this.total = res.total;
      });
    },
    getStoreList() {
      // 类型(1仓库 2门仓)
      listStore({ type: 1, page: 1, limit: 999 }).then((res) => {
        this.storeList[0].children = res.list;
      });
      listStore({ type: 2, page: 1, limit: 999 }).then((resr) => {
        this.storeList[1].children = resr.list;
      });
    },
    search() {
      this.params.page = 1;
      this.getList();
    },

    input1(){
      if(!this.params.productName) this.search()
    },

    input2(){
      if(!this.params.itemNumber) this.search()
    },

    input3(){
      if(!this.params.barCode) this.search()
    },

    clearAll() {
      this.params = {
        categoryId: '',
        productName: '',
        limit: 20,
        page: 1,
        itemNumber: '',
        storeId: '',
        storeType: '',
        barCode: ""
      };
      this.getList();
    },
    handleSeachList(e) {
      this.params.categoryId = e;
      console.log(this.params.categoryId);
    },
    handleTransferOutStoreChange(val) {
      console.log(val)
      this.params.storeType = val[0];
      this.params.storeId = val[1];
    },
  },
};
</script>

<style lang="scss">
.recordPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  .el-drawer .el-drawer__body {
    padding: 0 !important;
  }
  .drawerVue {
    width: 100%;
    height: calc(100vh);
    background: #f5f5f5;
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #000;
      font-weight: 600;
      font-size: 14px;
    }
    .chatBody {
      width: 100%;
      height: calc(100vh - 50px);
      overflow-y: scroll;
      .item {
        width: 100%;
        display: flex;
        padding: 0 20px 20px 20px;
        .content {
          max-width: 60%;
          border-radius: 0 15px 15px 15px;
          color: #333;
          background: #fff;
          padding: 15px;
          line-height: 1.4;
        }
        .active {
          background: #2561ef;
          color: #fff;
        }
        .img {
          max-width: 100%;
          height: auto;
          cursor: pointer;
          border-radius: 4px;
        }
        video {
          max-width: 300px;
          height: auto;
        }
        .product {
          width: 60%;
          height: 100px;
          border-radius: 0 15px 15px 15px;
          background: #fff;
          padding: 15px;
          display: flex;
          cursor: pointer;
        }
        .order {
          width: 60%;
          height: 140px;
          border-radius: 0 15px 15px 15px;
          background: #fff;
          padding: 15px;
          cursor: pointer;
        }
      }
    }
    .chatBody::-webkit-scrollbar {
      width: 0;
    }
  }
  .filterVue {
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    .filter {
      display: flex;
      align-items: center;
      padding-right: 30px;
    }
    .btn1 {
      width: 60px;
      height: 32px;
      border-radius: 4px;
      line-height: 32px;
      text-align: center;
      background: #2561ef;
      color: #fff;
      margin-right: 10px;
      cursor: pointer;
    }
  }
  .tableVue {
    flex: 1;
    height: calc(100vh - 186px - 62px);
    .thVue {
      width: 100%;
      display: flex;
      height: 70px;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      .th {
        flex: 1;
        color: #333333;
        font-weight: 600;
        text-align: center;
      }
      .th:nth-last-child(1) {
        width: 250px;
      }
    }
    .tdVue {
      width: 100%;
      height: calc(100vh - 186px - 62px - 70px - 60px);
      overflow-y: scroll;
      .tdItem {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .td {
          flex: 1;
          text-align: center;
        }
        .td:nth-last-child(1) {
          width: 250px;
        }
      }
    }
    .tdVue::-webkit-scrollbar {
      width: 0;
    }
    .paginationVue {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
